import React from 'react';
import { IRouteComponentProps } from 'umi';
import styles from '../index.less';
import { useModel } from 'umi';
import { PageHeader } from 'antd';
import { history } from 'umi';
// import 'antd/dist/antd.css';
import { useState, useEffect } from 'react';

const TopicDetail: React.FC<IRouteComponentProps> = ({ match }: any) => {
  let id = JSON.parse(JSON.stringify(match)).params.id;
  let { isList, setList } = useModel('topic', model => ({
    isList: model.isList,
    setList: model.setList,
  }));
  let [topicData, setTopicData] = useState<any>([]);
  let [commentData, setCommentData] = useState<any>([]);
  let { topicDetailData, commentlData } = useModel('home', model => ({
    topicDetailData: model.topicDetailData,
    commentlData: model.commentlData,
  }));
  function goTopicDetail(id: any) {
    history.go(0);
    history.push(`/topicDetail/${id}`);
  }
  function createMarkup() {
    return { __html: `${topicData.content}` };
  }
  async function getList() {
    let result = await topicDetailData(id);
    setTopicData(result);
    let res = await commentlData({
      valueId: id,
      typeId: '0',
    });
    setCommentData(res);
  }
  useEffect(() => {
    getList();
    setList();
  }, []);

  return (
    <div className={styles.topicData}>
      <PageHeader
        className="site-page-header"
        onBack={() => {
          history.push('/main/home');
        }}
        title={topicData.title}
      />
      {/* 图片 */}
      <div
        className={styles.topicDetailImg}
        dangerouslySetInnerHTML={createMarkup()}
      />
      {/* 评论 */}
      <div className={styles.commentWrap}>
        <p>精选留言</p>
        {commentData.map((item: any) => {
          return (
            <ul key={item.id}>
              <li>
                <span>{item.user_info.username}</span>
                <span>{item.add_time}</span>
              </li>
              <li>{item.content}</li>
            </ul>
          );
        })}
      </div>
      <div className={styles.topic}>
        {isList &&
          isList.map((item: any) => {
            return (
              <div
                key={item.id}
                className={styles.topic_box}
                onClick={() => {
                  goTopicDetail(item.id);
                }}
              >
                <img src={item.scene_pic_url} alt=""></img>
                <b>{item.title}</b>
                <p>{item.subtitle}</p>
                <span>
                  <div className={styles.size}>{item.price_info}元起</div>
                </span>
              </div>
            );
          })}
      </div>
    </div>
  );
};

export default TopicDetail;
